<template>
    <div>
        <div class="animateCont">
            <div class="heart"></div>
            <div class="img-light">
                鼠标移入图片后一道闪光效果
            <img src="static/image/detaiImg.png" width="300" height="300">
            </div>
        </div>
        <div>
            <p>跳转文字间距、模糊度动效</p>
            <p class="animateTitle">{{animateTitle}}</p>
        </div>
        <div class="container">
            <h1>天通眼、企业数据分析</h1>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            animateTitle: '跳转文字间距、模糊度动效'
        }
    }
};
</script>

<style lang="less">
.animateCont{
    display: flex;
}
.heart{
    height: 100px;
    width: 100px;
}
.heart::after {
  content: "❤";
  font-size: 30px;
  color: red;
  animation: mymove 2s cubic-bezier(0.2, 0.73, 0.71, 0.44) infinite;
  -webkit-animation: mymove 5s cubic-bezier(0.2, 0.73, 0.71, 0.44) infinite; /*Safari and Chrome*/
}
@keyframes mymove {
  0% {
    font-size: 40px;
  }
  50% {
    font-size: 20px;
  }
  100% {
    font-size: 40px;
  }
}
.img-light {
  position: relative;
  width: 300px;
  height: 300px;
  background-image: url('')
}

.img-light::after {
  content: "";
  height: 100%;
  width: 100px;
  transform: skewX(-25deg) translateZ(0);
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.3) 50%,
    hsla(0, 0%, 100%, 0)
  );
  position: absolute;
  left: -150%;
  top: 0;
  z-index: 2;
}

.img-light:hover::after {
  transition: left 2s ease-in-out;
  left: 150%;
}
.animateTitle {
    color: white;
    text-transform: uppercase;
    margin-top: 100px;
    text-align: center;
    font-size: 2rem;
    line-height: 1;
    /* animation: letterspacing 1s 7 alternate ease-in-out; */
    animation: letterspacing 2s linear;
    display: block;
    letter-spacing: .5rem;
}
@keyframes letterspacing {
    0% {
        letter-spacing: -72px;
        filter: blur(20px);
    }
    40% {
        filter: blur(6px);
    }
    80% {
        letter-spacing: 8px;
        filter: blur(0);
    }
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 2em;
    filter: contrast(20);
    background-color: black;
    overflow: hidden;
}

h1 {
    font-family: Righteous;
    color: white;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1;
    animation: letterspacing 5s infinite alternate ease-in-out;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    letter-spacing: -2.2rem;
}

@keyframes letterspacing {
    0% {
        letter-spacing: -2.2rem;
        filter: blur(.3rem);
    }

    50% {
        filter: blur(.5rem);
    }

    100% {
        letter-spacing: .1rem;
        filter: blur(0rem);
        color: #fff;
    }
}
</style>
